import React                from 'react';
import { Link, NavLink }    from 'react-router-dom';
import leftPng from './left.png';
import rightPng from './right.png';

import eventBus     from '../../util/eventBus.js';
import './index.scss';

class SlideNav extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      collapse: true,
      navList: [
        {
          name: '首页',
          path: '/',
          children: []
        },
        {
          name: '商品',
          children: [
            {
              name: '商品管理',
              path: '/product'
            },
            {
              name: '品类管理',
              path: '/product-category'
            }
          ]
        },
        {
          name: '订单',
          children: [
            {
              name: '订单管理',
              path: '/order'
            }
          ]
        },
        {
          name: '用户',
          children: [
            {
              name: '用户管理',
              path: '/user'
            }
          ]
        }
      ]
    }
  }
  render () {
    return (
      <div id="slide-nav" className="transition navbar-default navbar-side" style={ {width: this.state.collapse ? '260px' : '50px'} }>
        <div className={'sidebar-collapse pl ' + (this.state.collapse ? '' : 'sidebar-collapse-in')}>
          {
            <img className="collapse-icon cursor" src={ this.state.collapse ? leftPng : rightPng } alt="箭头" onClick = { (e) => { this.collapseClick() } } />
          }
          <ul className="nav">
            {
              this.state.navList.map((item, index) => {
                if (item.children.length === 0) {
                  return (
                    <li key={ index }>
                      <NavLink exact activeClassName="active-menu" to={ item.path }>
                        <i className="fa fa-dashboard"></i>
                        <span className="item-collapse-none item-name">{ item.name }</span>
                      </NavLink>
                    </li>
                  )
                } else {
                  return (
                    <li className={this.state.collapse ? 'active' : 'active little-li'} key={ index }>
                      <a className='cursor' onClick={ (e) => { this.fold(index) } }>
                        <i className="fa fa-list"></i>
                        <span className="item-collapse-none item-name">{ item.name }</span>
                        <span className='fa arrow transition item-collapse-none' style={ {transform: item.check ? 'rotateZ(180deg)' : 'rotateZ(0deg)'} }></span>
                      </a>
                      <ul className='nav nav-second-level collapse transition' style={ {height: item.check && this.state.collapse ? item.height + 'px' : '0px'} } >
                        {
                          item.children.map((item1, index1) => {
                            return (
                              <li key={ index + '-' + index1 }>
                                <NavLink to={ item1.path } activeClassName="active-menu">{ item1.name }</NavLink>
                              </li>
                            )
                          })
                        }
                      </ul>
                    </li>
                  )
                }
              })
            }
          </ul>
        </div>
      </div>
    )
  }
  componentWillMount () {
    this.state.navList.forEach((item, index) => {
      item.check = false
      item.height = item.children.length * 34
    })
  }
  /* events */
  collapseClick () {
    this.setState({
      collapse: !this.state.collapse
    })
    eventBus.$emit('collapseChange', !this.state.collapse)
  }
  fold (index) {
    let arr = this.state.navList
    arr[index].check = !arr[index].check
    this.setState({
      navList: arr
    })
  }
}

export default SlideNav